<template>
    <div>
        <div id="h1">个人资料</div>
        <el-card style="width: 1400px;margin-left: 210px;margin-top: 30px">
            <el-form label-width="80px" size="large">
                <el-upload
                        style="text-align: left;margin-left: 40px;margin-bottom: 20px"
                        class="avatar-uploader"
                        action="http://localhost:8081/file/upload/"
                        :before-upload="beforeAvatarUpload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess">
                    <img v-if="form.userHead" :src="form.userHead" class="avatar" style="object-fit: cover">
                    <i style="border: 1px solid gray" v-else class="el-icon-plus avatar-uploader-icon">上传头像</i>
                </el-upload>


                <el-form-item label="账号:" style="width: 250px">
                    <el-input v-model="form.userNum" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="姓名:" style="width: 350px">
                    <el-input v-model="form.userName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱:" style="width: 350px">
                    <el-input v-model="form.email" autocomplete="off" disabled></el-input>
                    <el-button style="position: absolute;left: 280px;" @click="dialogVisible = true">改绑邮箱</el-button>
                </el-form-item>
                <el-form-item label="电话:" style="width: 350px">
                    <el-input v-model="form.userTel" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="地址:" style="width: 450px">
                    <el-input v-model="form.userAddress" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <hr style="height: 1px;border: none;border-top: 1px dashed gray">
            <div style="text-align:left;margin-top: 30px;margin-left: 34px">
                <el-button style="width: 100px" type="primary" @click="save">保存</el-button>
            </div>
        </el-card>
        <el-dialog
                title="改绑邮箱"
                :visible.sync="dialogVisible"
                width="30%">
            <el-form label-width="100px" size="large">
                <el-form-item label="原邮箱:" style="width: 300px">
                    <el-input v-model="form.email" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item label="输入新邮箱:" style="width: 300px">
                    <el-input v-model="user.email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="输入验证码:" style="width: 390px">
                    <el-input style="width: 160px" v-model="user.code" placeholder="请输入验证码" type="text"
                              prefix-icon="el-icon-unlock">
                    </el-input>
                    <el-button style="height: 40px;width: 110px" type="primary" @click="getCode">获取验证码
                    </el-button>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="updateEmail">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    import request from "@/request";

    export default {
        name: "UserInfo",
        data() {
            return {
                form: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
                dialogVisible: false,
                newemail: "",
                user: {},
            }
        },
        methods: {
            save() {
                console.log(this.form);
                request.post("/user/save/userinfo", this.form).then(res => {
                    if (res.code === '200') {
                        this.$store.commit("setUserInfo", JSON.stringify(this.form))  // 存储用户信息到浏览器
                        this.$message.success("保存成功")
                        this.$store.dispatch("getuserinfo")
                    } else {
                        this.$message.error(res.msg)
                    }
                })
            },
            //监测图片格式和大小是否合适
            beforeAvatarUpload(file) {
                const isJPEG = file.type === 'image/jpeg';
                const isJPG = file.type === 'image/jpg';
                const isPNG = file.type === 'image/png';
                const isLt5M = file.size / 1024 / 1024 < 5;

                if (!(isJPG || isJPEG || isPNG)) {
                    this.$message.error('上传头像图片只能是 JPG,PNG,JPEG 格式!');
                }
                if (!isLt5M) {
                    this.$message.error('上传头像图片大小不能超过 5MB!');
                }
                return (isJPG || isJPEG || isPNG) && isLt5M;
            },
            //头像上传
            handleAvatarSuccess(res) {
                console.log(res);
                this.form.userHead = res;
                this.$store.commit("setUserHead",res)
            },
            getCode() {
                if (!this.user.email) {
                    this.$message.warning("请输入新邮箱")
                    return;
                }
                if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.user.email)) {
                    this.$message.warning("请输入正确的邮箱格式")
                    return;
                }
                if (this.user.email==this.form.email) {
                    this.$message.warning("新邮箱与原邮箱一样，无需修改")
                    return;
                }
                request.get("/user/updateemail/" + this.user.email).then(res => {
                    if (res.code === '200') {
                        this.$message.success("发送成功")
                    } else {
                        this.$message.error(res.msg)
                    }
                })
            },
            updateEmail() {
                this.user.userId=this.form.userId;
                console.log(this.user)
                request.post("/user/updateemail", this.user).then(res => {
                    if (res.code === '200') {
                        console.log(res)
                        this.dialogVisible=false
                        this.form.email=this.user.email;
                        this.$store.commit("setUserInfo", JSON.stringify(this.form))  // 存储用户信息到浏览器
                        this.$message.success("改绑成功！")
                    } else {
                        this.$message.error(res.msg)
                    }
                })
            },
        }
    }
</script>

<style scoped>
    #h1 {
        font-size: 22px;
        text-align: left;
        margin-left: 210px;
        margin-top: 30px;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9 !important;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>